<template>
    <div class="dashboard-container">
        <div v-show="showFlag">
            <my-search :fields="fieldsList" :baseNumber="12" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false"></my-search>

            <div class="table-list">
                <my-table v-loading="loading" ref="myEltable" style="width: 100%" 
                row-key="id" :showsummary="false" :columns="tableColumns" 
                :tableData="tableDatas" :pageNum="queryObj.pageNo" 
                :pageSize="queryObj.pageSize" :height="$store.state.app.windowHeight - 180" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" :totalPage="total" highlight-current-row :ifSelect="false" />
            </div>
        </div>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" append-to-body width="1200px" destroy-on-close top="6vh">
            <!-- <Echart :id="myEchart" :option="option" :height="$store.state.app.windowHeight - 200 + 'px'" :width="'100%'" /> -->
            <my-table v-loading="dialogLoading" ref="myEltable" v-show="dialogTitle=='资产负债表'"
            style="width: 100%" row-key="id" :ifIndex="false"
            :height="$store.state.app.windowHeight - 180"
            :showsummary="false" :columns="zcfzbColumns" 
            :tableData="dialogtableDatas" :current="false" :isShowPage="false" highlight-current-row :ifSelect="false" />
          <my-table v-loading="dialogLoading" ref="myEltable" v-show="dialogTitle=='现金流量表'"
            style="width: 100%" row-key="id" :ifIndex="false"
            :height="$store.state.app.windowHeight - 180"
            :showsummary="false" :columns="xjllbColumns" 
            :tableData="dialogtableDatas" :current="false" :isShowPage="false" highlight-current-row :ifSelect="false" />
            <my-table v-loading="dialogLoading" ref="myEltable" v-show="dialogTitle=='利润表'"
            style="width: 100%" row-key="id" :ifIndex="false"
            :height="$store.state.app.windowHeight - 180"
            :showsummary="false" :columns="lrbColumns" 
            :tableData="dialogtableDatas" :current="false" :isShowPage="false" highlight-current-row :ifSelect="false" />
        </el-dialog>
    </div>
</template>

<script>

import { queryQycwbbHz,queryQycwbb } from '@/api/cxtj/qycwbbfx'
export default {
    name: 'qycwbbfx-zbmx',

    data() {
        return {
            loading: false,
            dialogLoading: false,
            showFlag: true,
            dialogVisible: false,
            dialogTitle:'',
            fieldsList: [
                {
                    label: '纳税人名称',
                    field: 'nsrmc',
                    type: 'text',
                    value: ''
                },
                {
                    label: '纳税人识别号',
                    field: 'nsrsbh',
                    type: 'text',
                    value: ''
                },




                {
                    label: '年度范围',
                    field: 'nd',
                    type: 'yearrange', // daterange
                    value: [],
                    options: [
                        {
                            field: 'ksnd',
                            value: ''
                        },
                        {
                            field: 'jsnd',
                            value: ''
                        }
                    ],
                    change: value => {
                        // this.changxm(value);
                    }
                },

                {
                    label: '财务报表',
                    field: 'cwbb',
                    type: 'select',
                    value: "",
                    multiple: false,
                    options: [
                        { label: '资产负债表', value: '资产负债表' },
                        { label: '现金流量表', value: '现金流量表' },
                        { label: '利润表', value: '利润表' },
                    ],
                    change: (value) => {
                    }
                },

            ],

            tableColumns: [
                {
                    label: '财务报表名称',
                    prop: 'bblx',
                    align: 'center',
                    minWidth: 200
                },
                {
                    label: '所属期起',
                    prop: 'ssqq',
                    align: 'center',
                    minWidth: 200
                },

                {
                    label: '所属期止',
                    prop: 'ssqz',
                    align: 'center',
                    minWidth: 200
                },

                {
                    label: '操作',
                    prop: 'hyxl_mc',
                    align: 'center',
                    width: 200,
                    render: (h, params) => {
                        return (
                            <span>
                                <el-button type="text" onClick={() => this.showDialog(params.row)}>查看</el-button>
                            </span>
                        );
                    }
                },






            ],

            tableDatas: [],
         
            dialogtableDatas: [],
            kmbColumns:[],
            zcfzbColumns:[
                 {
                    label: '资产',
                    prop: 'zcxmmc',
                    align: 'center',
                    minWidth: 200
                },
                // {
                //     label: '行次',
                //     prop: 'ewbhxh',
                //     align: 'center',
                //     minWidth: 200
                // },
                {
                    label: '期末余额',
                    prop: 'qmyeZc',
                    align: 'center',
                    minWidth: 160
                },
                {
                    label: '上年年末余额',
                    prop: 'snnmyeZc',
                    align: 'center',
                    minWidth: 160
                },
                {
                    label: '负债和所有者权益（或股东权益）',
                    prop: 'qyxmmc',
                    align: 'center',
                    minWidth: 250
                },
                // {
                //     label: '行次',
                //     prop: 'ewbhxh',
                //     align: 'center',
                //     minWidth: 200
                // },
                 {
                    label: '期末余额',
                    prop: 'qmyeQy',
                    align: 'center',
                    minWidth: 160
                },
                {
                    label: '上年年末余额',
                    prop: 'snnmyeQy',
                    align: 'center',
                    minWidth: 160
                },
            ],
            xjllbColumns:[
                 {
                    label: '项目',
                    prop: 'hmc',
                    align: 'center',
                    minWidth: 200
                },
               
                {
                    label: '本期金额',
                    prop: 'bqje',
                    align: 'center',
                    minWidth: 160
                },
                {
                    label: '上期金额',
                    prop: 'sqje1',
                    align: 'center',
                    minWidth: 160
                },
                
            ],
            lrbColumns:[
                 {
                    label: '项目',
                    prop: 'hmc',
                    align: 'center',
                    minWidth: 200
                },
               
                {
                    label: '本期金额',
                    prop: 'bqje',
                    align: 'center',
                    minWidth: 160
                },
                {
                    label: '上期金额',
                    prop: 'sqje1',
                    align: 'center',
                    minWidth: 160
                },
                
            ],
            queryObj: {
                nsrmc: '', //公司名称
                nsrsbh: '',
                ksnd: '',
                jsnd: '',
                cwbb: '',
                pageNo: 1,
                pageSize: 20
            },
            total: 0,

        }
    },

    mounted() {

        this.queryObj.nsrmc = this.$route.params.nsrmc
        this.queryObj.nsrsbh = this.$route.params.nsrsbh
        this.queryObj.ksnd = this.$route.params.ksnd
        this.queryObj.jsnd = this.$route.params.jsnd


        this.fieldsList[0].value = this.$route.params.nsrmc
        this.fieldsList[1].value = this.$route.params.nsrsbh
        this.fieldsList[2].value = [this.$route.params.ksnd, this.$route.params.jsnd]
        this.getTableData();
    },
    methods: {

        searchForm(params) {
            this.queryObj.nsrmc = params.nsrmc || ''
            this.queryObj.nsrsbh = params.nsrsbh || ''
            this.queryObj.ksnd = params.nd[0]
            this.queryObj.jsnd = params.nd[1]
            this.queryObj.cwbb = params.cwbb


            this.getTableData();
        },
        checkParams(index, str) {
            let arrList = this.fieldsList[index].options
            for (let i = 0; i < arrList.length; i++) {
                if (arrList[i].value == str) {
                    return arrList[i].label
                }
            }
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.tableDatas = []
            this.total = 0

        },
        getTableData() {
            this.loading = true
            let params = {
                nsrmc: this.queryObj.nsrmc,
                nsrsbh: this.queryObj.nsrsbh,
                ksnd: this.queryObj.ksnd,
                jsnd: this.queryObj.jsnd,
                bblx: this.queryObj.cwbb,


                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,


            }
            queryQycwbbHz(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                }
            })
        },





        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },

        showDialog(row) {
            console.log(row)
            this.dialogVisible = true
            this.dialogLoading= true
            this.dialogTitle = row.bblx
            queryQycwbb({
                bblx:row.bblx,
                zlbscjuuid:row.zlbscjuuid,
            }).then((res)=>{
                 console.log(res)
                  this.dialogLoading= false
                 this.dialogtableDatas = res.data
            })
        },



        currIndex(index) {
            return index + 1;
        },
    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    padding: 8px;
    .btn {
        padding: 0 0 8px 0;
    }
}
// .container {
//     height: 100%;
//     width: 100%;
//     background-color: #fff;
//     .searchMy {
//         padding: 8px;
//         .searchMy-form {
//             height: 28px;
//         }
//     }
// }
</style>
